<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>分类管理</title>
  <link rel="stylesheet" href="lib/bootstrap.min.css">
  <style>
    th {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="bg-primary text-right">
    <span class="btn btn-danger" id="btnBack">返回菜单</span>
  </div>
  <div class="form-inline text-center">

    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon">名称</span>
        <input type="text" id="txtSname" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon">描述</span>
        <input type="text" id="txtDescription" class="form-control">
      </div>
    </div>

    <span class="btn btn-danger" id="btnAdd">添加</span>
    <span class="text-danger" id="spError"></span>

  </div>
  <div>
    <table class="table table-hover">
      <thead>
        <tr class="bg-success">
          <th>编号</th>
          <th>名称</th>
          <th>是否启用</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbData"></tbody>
    </table>

    <div class="text-center">

      <nav>
        <ul class="pagination">
          <li>
            <a href="javascript:void(0);" id="btnPre">上一页</a>
          </li>
          <li>
            <span id="spPage"></span>
          </li>
          <li>
            <a href="javascript:void(0);" id="btnNext">下一页</a>
          </li>
        </ul>
      </nav>

    </div>

  </div>

  <!-- 修改对话框开始 -->
  <div>
    <div id="dialogModify" style="display: none;">
      <input type="hidden" id="txtSid">
      <h1 class="text-center">修改分类信息</h1>
      
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">名称</span>
          <input type="text" id="txtUsname" class="form-control">
        </div>
      </div>

      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">描述</span>
          <input type="text" id="txtUdescription" class="form-control">
        </div>
      </div>

      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">启用</span>
          <select id="selEnable" class="form-control">
            <option value="y">启用中</option>
            <option value="n">停用中</option>
          </select>
        </div>
      </div>

      <div class="text-center">
        <span class="btn btn-primary" id="btnUpdate">保存</span>
        <span class="btn btn-primary" id="btnCloseUpdate">取消</span>
      </div>

    </div>
  </div>
  <!-- 修改对话框结束 -->

  <!-- 通用对话框开始 -->
  <div>
    <!-- 等待对话框 -->
    <div class="modal fade" data-keyboard="false" data-backdrop="false" role="dialog" tabindex="-1" id="wait-dialog" style="z-index: 1999;">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="wait-dialog-title"></h4>
          </div>
          <div class="modal-body">
            <div>
              <div id="wait-dialog-info" class="h4 text-center"></div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- 等待对话框结束 -->
    <!-- 确定对话框 -->
    <div class="modal fade" role="dialog" tabindex="-1" id="alert-dialog" style="z-index: 1998;">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="alert-dialog-title"></h4>
          </div>
          <div class="modal-body">
            <div>
              <div id="alert-dialog-info" class="h4 text-center"></div>
            </div>
          </div>
          <div class="modal-footer">
            <span class="btn btn-primary" data-dismiss="modal">确定</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 确定对话框结束 -->

    <!-- 确认对话框 -->
    <div class="modal fade" role="dialog" data-keyboard="false" data-backdrop="false" tabindex="-1" id="confirm-dialog" style="z-index: 1997;">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="confirm-dialog-title"></h4>
          </div>
          <div class="modal-body">
            <div>
              <div id="confirm-dialog-info" class="h4 text-center"></div>
            </div>
          </div>
          <div class="modal-footer">
            <span class="btn btn-primary" id="confirm-dialog-yes">是</span>
            <span class="btn btn-primary" id="confirm-dialog-no">否</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 确认对话框结束 -->

    <!-- 自定义对话框 -->
    <div class="modal fade" data-keyboard="false" data-backdrop="false" role="dialog" tabindex="-1" id="custom-dialog" style="z-index: 1990;">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="custom-dialog-title"></h4>
          </div>
          <div class="modal-body">
            <div id="custom-dialog-body"></div>
          </div>

        </div>
      </div>
    </div>
    <!-- 自定义对话框结束 -->
  </div>
  <!-- 通用对话框结束 -->
  <script type="text/javascript" src="lib/jquery.min.js"></script>
  <script type="text/javascript" src="lib/bootstrap.min.js"></script>
  <script type="text/javascript" src="lib/bs-dialog.js"></script>
  <script type="text/javascript" src="lib/data-service.js"></script>
  <script type="text/javascript" src="js/subject.js"></script>
</body>

</html>